import type { Project } from "@/api/services/project";
import { projectService } from "@/api/services/project";
import { LinkOutlined } from "@ant-design/icons";
import { Card, Col, Empty, Row, Spin, Typography, message } from "antd";
import type React from "react";
import { useEffect, useState } from "react";

const { Title, Text } = Typography;

const ProjectList: React.FC = () => {
	const [projects, setProjects] = useState<Project[]>([]);
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		fetchProjects();
	}, []);

	const fetchProjects = async () => {
		try {
			setLoading(true);
			const response = await projectService.projectList({
				page: 1,
				limit: 100,
			});
			setProjects(response.items || []);
		} catch (error) {
			message.error("获取项目列表失败");
		} finally {
			setLoading(false);
		}
	};

	const handleProjectClick = (url: string) => {
		window.open(url, "_blank");
	};

	if (loading) {
		return (
			<div style={{ textAlign: "center", padding: "50px" }}>
				<Spin size="large" />
			</div>
		);
	}

	if (!projects.length) {
		return (
			<Card>
				<Empty description="暂无项目" />
			</Card>
		);
	}

	return (
		<div style={{ padding: "24px" }}>
			<Row gutter={[16, 16]}>
				{projects.map((project) => (
					<Col span={24} key={project.id}>
						<Card
							hoverable
							onClick={() => handleProjectClick(project.url)}
							style={{ height: "100%" }}
						>
							<div style={{ marginBottom: "12px" }}>
								<Text strong style={{ fontSize: "16px" }}>
									{project.name}
								</Text>
								<LinkOutlined style={{ marginLeft: "8px", color: "#1890ff" }} />
							</div>
							<div>
								<Text type="secondary" style={{ fontSize: "14px" }}>
									{project.url}
								</Text>
							</div>
						</Card>
					</Col>
				))}
			</Row>
		</div>
	);
};

export default ProjectList;
